<template>
  <div class="element-plus-test">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>Element Plus getBoundingClientRect 修复测试</span>
        </div>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <h3>基础组件测试</h3>
          
          <!-- 下拉菜单测试 -->
          <div class="test-section">
            <h4>下拉菜单测试</h4>
            <SafeElementWrapper>
              <el-dropdown @command="handleCommand">
                <el-button type="primary">
                  下拉菜单
                  <el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="a">选项 A</el-dropdown-item>
                    <el-dropdown-item command="b">选项 B</el-dropdown-item>
                    <el-dropdown-item command="c">选项 C</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </SafeElementWrapper>
          </div>
          
          <!-- 弹出框测试 -->
          <div class="test-section">
            <h4>弹出框测试</h4>
            <SafeElementWrapper>
              <el-popover placement="top" :width="200" trigger="click">
                <template #reference>
                  <el-button>点击弹出</el-button>
                </template>
                <div>这是一个弹出框内容</div>
              </el-popover>
            </SafeElementWrapper>
          </div>
          
          <!-- 工具提示测试 -->
          <div class="test-section">
            <h4>工具提示测试</h4>
            <SafeElementWrapper>
              <el-tooltip content="这是一个工具提示" placement="top">
                <el-button>悬停查看提示</el-button>
              </el-tooltip>
            </SafeElementWrapper>
          </div>
        </el-col>
        
        <el-col :span="12">
          <h3>DOM操作测试</h3>
          
          <!-- 元素位置测试 -->
          <div class="test-section">
            <h4>元素位置测试</h4>
            <div ref="testElement" class="test-element">
              测试元素
            </div>
            <el-button @click="testGetBoundingClientRect">获取元素位置</el-button>
            <div v-if="elementRect" class="rect-info">
              <p>元素位置信息:</p>
              <pre>{{ JSON.stringify(elementRect, null, 2) }}</pre>
            </div>
          </div>
          
          <!-- 等待元素测试 -->
          <div class="test-section">
            <h4>等待元素测试</h4>
            <el-button @click="testWaitForElement">等待元素准备</el-button>
            <div v-if="waitResult" class="wait-result">
              <p>{{ waitResult }}</p>
            </div>
          </div>
          
          <!-- 错误处理测试 -->
          <div class="test-section">
            <h4>错误处理测试</h4>
            <el-button @click="testErrorHandling">测试错误处理</el-button>
            <div v-if="errorResult" class="error-result">
              <p>{{ errorResult }}</p>
            </div>
          </div>
        </el-col>
      </el-row>
      
      <!-- 修复状态显示 -->
      <el-row style="margin-top: 20px;">
        <el-col :span="24">
          <el-alert
            title="修复状态"
            :description="fixStatus"
            type="success"
            show-icon
            :closable="false"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import SafeElementWrapper from '@/components/SafeElementWrapper.vue'
import { 
  safeGetBoundingClientRect, 
  waitForElement, 
  safeDOMOperation,
  retryDOMOperation 
} from '@/utils/dom'

// 响应式数据
const testElement = ref<HTMLElement>()
const elementRect = ref<DOMRect | null>(null)
const waitResult = ref<string>('')
const errorResult = ref<string>('')
const fixStatus = ref<string>('正在检查修复状态...')

// 下拉菜单处理
const handleCommand = (command: string) => {
  console.log(`选择了选项: ${command}`)
}

// 测试获取元素位置
const testGetBoundingClientRect = () => {
  try {
    const rect = safeGetBoundingClientRect(testElement.value)
    if (rect) {
      elementRect.value = rect
      console.log('成功获取元素位置信息')
    } else {
      console.warn('无法获取元素位置信息')
    }
  } catch (error) {
    console.error(`获取元素位置失败: ${error}`)
  }
}

// 测试等待元素
const testWaitForElement = async () => {
  try {
    waitResult.value = '正在等待元素准备...'
    const element = await waitForElement('.test-element', 3000)
    if (element) {
      waitResult.value = '元素已准备就绪！'
      console.log('元素等待成功')
    } else {
      waitResult.value = '元素等待超时'
      console.warn('元素等待超时')
    }
  } catch (error) {
    waitResult.value = `等待元素失败: ${error}`
    console.error(`等待元素失败: ${error}`)
  }
}

// 测试错误处理
const testErrorHandling = async () => {
  try {
    errorResult.value = '正在测试错误处理...'
    
    // 测试安全DOM操作
    const result = safeDOMOperation(() => {
      // 故意调用一个不存在的元素
      const nonExistentElement = document.querySelector('.non-existent-element')
      return nonExistentElement?.getBoundingClientRect()
    }, null)
    
    if (result === null) {
      errorResult.value = '安全DOM操作成功处理了错误情况'
      console.log('错误处理测试通过')
    }
    
    // 测试重试机制
    try {
      await retryDOMOperation(() => {
        const element = document.querySelector('.non-existent-element')
        if (!element) {
          throw new Error('元素不存在')
        }
        return element.getBoundingClientRect()
      }, 2, 100)
    } catch (error) {
      errorResult.value = '重试机制正常工作，最终失败是预期的'
      console.log('重试机制测试通过')
    }
  } catch (error) {
    errorResult.value = `错误处理测试失败: ${error}`
    console.error(`错误处理测试失败: ${error}`)
  }
}

// 检查修复状态
const checkFixStatus = () => {
  try {
    // 检查原型链是否被修复
    const elementProto = Element.prototype as any
    const htmlElementProto = HTMLElement.prototype as any
    
    if (elementProto._getBoundingClientRectFixed && htmlElementProto._getBoundingClientRectFixed) {
      fixStatus.value = '✅ Element Plus getBoundingClientRect 修复已生效'
    } else {
      fixStatus.value = '❌ Element Plus getBoundingClientRect 修复未生效'
    }
  } catch (error) {
    fixStatus.value = `❌ 检查修复状态失败: ${error}`
  }
}

onMounted(() => {
  // 延迟检查修复状态，确保修复已应用
  setTimeout(() => {
    checkFixStatus()
  }, 500)
})
</script>

<style scoped>
.element-plus-test {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.test-section {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.test-section h4 {
  margin: 0 0 10px 0;
  color: #303133;
}

.test-element {
  width: 200px;
  height: 100px;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: #606266;
}

.rect-info {
  margin-top: 10px;
  padding: 10px;
  background-color: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
}

.rect-info pre {
  margin: 0;
  font-size: 12px;
  color: #409eff;
}

.wait-result, .error-result {
  margin-top: 10px;
  padding: 10px;
  background-color: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
  font-size: 14px;
  color: #409eff;
}
</style> 